<template>
  <div class="goodsDetaails">
    <div class="goodsDetaails-wrp">
      <div class="goods-img">
        <van-swipe
          class="my-swipe"
          :loop="false"
          :show-indicators="false"
          indicator-color="white"
          :width="260"
        >
          <van-swipe-item
            v-for="(img, index) in goodsDetails.topImages"
            :key="index"
            class="img-item"
            @click="getImg"
          >
            <img :src="img" alt="预览图片" />
          </van-swipe-item>
        </van-swipe>
        <div class="detail-head">
          <div class="head-entry" @click="$router.push('/home')">
            <i class="iconfont icon-home-page"></i>
          </div>
          <div class="head-entry" @click="$router.push('/shoppingcart')">
            <i class="iconfont icon-gouwuche"></i>
          </div>
        </div>
      </div>

      <div class="price-content" v-if="goodsDetails.normalPriceV2">
        <div class="left">
          <span class="price-icon">¥</span>
          <span class="price">{{ goodsDetails.itemInfo.highNowPrice }}</span>
          <span
            v-if="goodsDetails.normalPriceV2.priceTags.length > 0"
            class="discount"
            :style="[
              { color: goodsDetails.normalPriceV2.priceTags[0].textColor },
            ]"
            >{{ goodsDetails.normalPriceV2.priceTags[0].text }}</span
          >
        </div>
        <div class="right">
          <span>已售{{ goodsDetails.normalPriceV2.sales }}</span>
        </div>
      </div>
      <div class="goods-title" v-if="goodsDetails.itemInfo">
        <p>
          <img
            class="yushou"
            v-if="goodsDetails.itemInfo.titleTagsV2[0]"
            :src="goodsDetails.itemInfo.titleTagsV2[0]"
            alt=""
          />{{ goodsDetails.itemInfo.title }}
        </p>
        <div class="bangwxuan">
          <i>
            <img :src="goodsDetails.itemInfo.pickforme.icon" alt="" />
          </i>
          <span>{{ goodsDetails.itemInfo.pickforme.name }}</span>
        </div>
      </div>
      <div class="goods_fw">
        <div
          class="guige"
          @click="isPopupShow"
          v-if="!styleIndex && !sizeIndex"
        >
          <span class="xuanze">选择</span>
          <div class="guigeyanse" v-if="goodsDetails.skuInfo">
            <span
              >{{ goodsDetails.skuInfo.styleKey }}&nbsp;&nbsp;{{
                goodsDetails.skuInfo.sizeKey
              }}</span
            >
          </div>
        </div>
        <div class="guige" @click="isPopupShow" v-else>
          <span class="xuanze">选择</span>
          <div class="guigeyanse" v-if="goodsDetails.skuInfo">
            <span>已选：</span>
            <span v-show="propsStyleKey" style="color: #ff5777"
              >“{{ propsStyleKey }}”&nbsp;
            </span>
            <span v-show="propsSizeKey" style="color: #ff5777"
              >“{{ propsSizeKey }}”</span
            >
          </div>
          <img src="../assets/image/user/jiantou.png" alt="" />
        </div>
        <div
          class="fahuo"
          v-if="goodsDetails.delayExpress"
          v-show="goodsDetails.delayExpress.defaultData"
        >
          <span>发货</span>
          <div class="shuoming" v-if="goodsDetails.delayExpress.defaultData">
            <p>{{ goodsDetails.delayExpress.defaultData.textLine1 }}</p>
            <p class="fasj">
              {{ goodsDetails.delayExpress.defaultData.textLine2 }}
            </p>
          </div>
        </div>
        <div class="mianfyj">
          <span>免邮费</span>
          <span>北京</span>
        </div>
        <div class="fuwu" v-if="goodsDetails.itemServices">
          <h4>服务</h4>
          <ul @click="fwShow = true">
            <li
              v-for="(item, i) in goodsDetails.itemServices.services.slice(
                0,
                4
              )"
              :key="i"
            >
              <span>{{ item.name }}</span>
            </li>
          </ul>
          <img src="../assets/image/user/jiantou.png" alt="" />
        </div>
        <div
          class="xianguganzizhi"
          v-if="goodsDetails.certInfo"
          @click="
            $router.push({
              path: '/certInfo',
              query: {
                certImgList: goodsDetails.certInfo.certImgList,
              },
            })
          "
        >
          <h4>相关资质</h4>
          <p>{{ goodsDetails.certInfo.title }}</p>
          <img src="../assets/image/user/jiantou.png" alt="" />
        </div>
      </div>
      <div class="rateInfo" v-if="goodsDetails.rateInfoV2">
        <div class="pjpf">
          <span>评价({{ goodsDetails.rateInfoV2.cRate }})</span>
          <div class="pingfen">
            <p>
              评分<span>{{ goodsDetails.rateInfoV2.cScore }}</span>
            </p>
            <img src="../assets/image/user/jiantou.png" alt="" />
          </div>
        </div>
        <div
          class="rateTags"
          v-if="goodsDetails.rateInfoV2.rateTags.length > 0"
        >
          <ul>
            <li v-for="(item, i) in goodsDetails.rateInfoV2.rateTags" :key="i">
              <span>{{ item.value }}({{ item.num }})</span>
            </li>
          </ul>
        </div>
        <div class="rateInfoV2">
          <van-swipe
            class="my-swipe"
            :show-indicators="false"
            :loop="false"
            indicator-color="white"
            :width="300"
            :height="110"
          >
            <van-swipe-item
              v-for="(item, i) in goodsDetails.rateInfoV2.list"
              :key="i"
            >
              <div class="user_info">
                <img :src="item.user.avatar" alt="" />
                <div class="user_name">
                  <p class="p1">{{ item.user.uname }}</p>
                  <p class="p2">
                    {{ (item.created * 1000) | timeFormater("YYYY-MM-DD") }}
                  </p>
                </div>
              </div>
              <div class="user_pinglun">
                {{ item.content }}
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="shopLabels" v-if="goodsDetails.shopInfo">
        <div class="left">
          <img :src="goodsDetails.shopInfo.shopLogo" alt="" />
        </div>
        <div class="right">
          <div class="right_item">
            <h4>{{ goodsDetails.shopInfo.name }}</h4>
            <span>进店</span>
            <img src="../assets/image/user/jiantou.png" alt="" />
          </div>
          <div class="right_item2">
            <div class="right_pingfen">
              <van-rate
                v-model="goodsDetails.shopInfo.level"
                size="12"
                :count="goodsDetails.shopInfo.level"
                color="#FF4466"
              />
            </div>
            <div class="saleDesc">
              {{ goodsDetails.shopInfo.saleDesc
              }}{{ goodsDetails.shopInfo.cGoods }}
            </div>
          </div>
          <div class="right_item3">
            <ul>
              <li
                v-for="(item, i) in goodsDetails.shopInfo.shopLabels"
                :key="i"
              >
                <span>{{ item.text }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 图文详情 -->
      <div class="detailInfo" v-if="goodsDetails.detailInfo">
        <van-tabs
          v-model="active"
          animated
          line-width="90"
          line-height="1"
          title-active-color="#ff4747"
        >
          <van-tab title="图文详情">
            <img
              :src="img"
              alt=""
              v-for="(img, i) in goodsDetails.detailInfo.detailImage[0].list"
              :key="i"
            />
          </van-tab>
          <van-tab title="商品参数">
            <h4>商品详情</h4>
            <div class="parameter__product">
              <div
                v-for="(val, key, i) in goodsDetails.itemParams.info.set"
                :key="i"
                class="parameter__item flex"
              >
                <div class="parameter__name">{{ key }}</div>
                <div class="parameter__value ellipsis">{{ val }}</div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="footer">
      <van-goods-action>
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon
          icon="star"
          @click="collectionGoods"
          text="收藏"
          :color="iscollecGoods ? '#ff5577' : '#323233'"
        />
        <van-goods-action-button
          type="warning"
          style="color: #ff4466"
          color="#FFECEF"
          text="加入购物车"
          @click="isPopupShow"
        />
        <van-goods-action-button
          type="danger"
          color="#FF4B89"
          text="立即购买"
          @click="isPopupShow"
        />
      </van-goods-action>
    </div>
    <!-- 商品规格 -->
    <div class="goodsSku">
      <van-popup
        closeable
        v-model="popupShow"
        position="bottom"
        :style="{ height: '400px' }"
      >
        <div class="goodsSku">
          <div class="skudialog-goods">
            <div class="goods-imgs">
              <img :src="goodsImg" alt="" />
            </div>
            <!-- 商品详情 -->
            <div class="goods-info" v-if="goodsDetails.skuInfo">
              <ul>
                <li>
                  <span class="goods-price"
                    ><span style="font-size: 16px">￥</span
                    >{{ goodsDetails.itemInfo.highNowPrice }}</span
                  >
                </li>
                <li>
                  <span
                    >库存：<span>{{ goodsStock }}件</span></span
                  >
                </li>
                <li v-show="!styleIndex && !sizeIndex">
                  <span>请选择 </span>
                  <span
                    >{{ goodsDetails.skuInfo.styleKey }}
                    {{ goodsDetails.skuInfo.sizeKey }}</span
                  >
                </li>
                <li v-show="styleIndex | sizeIndex">
                  <span>已选：</span>

                  <span v-show="propsStyleKey" style="color: #ff5777"
                    >“{{ propsStyleKey }}”
                  </span>
                  <span
                    v-show="
                      propsStyleKey &&
                      !propsSizeKey &&
                      goodsDetails.skuInfo.sizeKey
                    "
                    >，请选择 {{ goodsDetails.skuInfo.sizeKey }}</span
                  >

                  <span v-show="propsSizeKey" style="color: #ff5777"
                    >“{{ propsSizeKey }}”</span
                  >
                  <span
                    v-show="
                      propsSizeKey &&
                      !propsStyleKey &&
                      goodsDetails.skuInfo.sizeKey
                    "
                    >，请选择 {{ goodsDetails.skuInfo.styleKey }}</span
                  >
                </li>
              </ul>
            </div>
          </div>
          <div class="sku-props" v-if="goodsDetails.skuInfo">
            <div
              class="sku-props-item"
              v-for="item in goodsDetails.skuInfo.props"
              :key="item.label"
            >
              <div class="props-label">{{ item.label }}</div>
              <ul class="props-list">
                <li
                  v-for="props in item.list"
                  :key="props.styleId"
                  @click="getGoods(props)"
                  :class="{
                    goodsSelected:
                      (styleIndex == props.index) | (sizeIndex == props.index),
                  }"
                >
                  {{ props.name }}
                </li>
              </ul>
            </div>
          </div>
          <div class="sku-number">
            <div class="props-label">数量</div>
            <div class="number-calculator">
              <van-stepper
                v-model="goodsNumber"
                input-width="25px"
                button-size="25px"
              />
            </div>
          </div>
          <van-goods-action>
            <van-goods-action-button
              type="warning"
              style="color: #ff4466"
              color="#FFECEF"
              text="加入购物车"
              @click="onAddCartClicked"
            />
            <van-goods-action-button
              type="danger"
              color="#FF4B89"
              text="立即购买"
              @click="onBuyClicked"
            />
          </van-goods-action>
        </div>
      </van-popup>
    </div>
    <!-- 服务弹窗 -->
    <van-popup
      v-model="fwShow"
      closeable
      position="bottom"
      :style="{ height: '280px' }"
    >
      <div class="head-title">服务说明</div>
      <ul class="dialog_content" v-if="goodsDetails.itemServices">
        <li v-for="(item, i) in goodsDetails.itemServices.services" :key="i">
          <div class="item-list">
            <p class="item_name">{{ item.name }}</p>
            <p class="item_content">{{ item.content }}</p>
          </div>
        </li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
//引入时间格式
import dayjs from "dayjs"; //引入时间格式化插件
import { mapMutations, mapState } from "vuex";

export default {
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  filters: {
    //   时间格式化
    timeFormater(value, str = "YYYY-MM-DD HH:mm:ss") {
      return dayjs(value).format(str);
    },
  },
  data() {
    return {
      goodsDetails: {}, //商品详情数据
      active: 0,
      fwShow: false, //服务弹窗
      popupShow: false,
      goodsNumber: 1,
      styleIndex: 0,
      sizeIndex: 0,
      propsStyleKey: "",
      propsSizeKey: "",
      goodsImg: "",
      goodsStock: null,
      goodsId: null,
    };
  },
  mounted() {},
  computed: {
    ...mapState("m_user", ["token"]),
    ...mapState("m_cart", ["collectionGoodsList"]),
    // 收藏状态
    iscollecGoods() {
      if (this.goodsDetails.itemInfo) {
        return this.collectionGoodsList.find(
          (item) => item.itemInfo.itemId === this.goodsDetails.itemInfo.itemId
        );
      }
    },
  },
  methods: {
    ...mapMutations("m_cart", ["addGoods", "updataCollectionGoods"]),
    async getGoodsDetails() {
      const {
        data: {
          data: { result: res },
        },
      } = await this.axios.get(
        `https://apis.netstart.cn/mogujie/goods/detail?itemId=${this.$route.query.id}`
      );
      this.goodsDetails = res;
      console.log(res);
    },
    // 图片预览
    getImg() {
      console.log(this.goodsDetails.topImages);
      ImagePreview({
        images: this.goodsDetails.topImages,
      });
    },
    // 收藏商品
    collectionGoods() {
      this.updataCollectionGoods(this.goodsDetails);
    },
    // 加入商品方法
    getgoods() {
      this.$toast({ message: "加入购物车成功", position: "bottom" });
      // 创建商品对象
      const goods = {
        goods_styleKey: this.propsStyleKey, //商品颜色值
        goods_sizeKey: this.propsSizeKey, //商品尺寸值
        goods_title: this.goodsDetails.itemInfo.title, //商品描述
        goods_img: this.goodsImg, //商品图片
        goods_price: Number(this.goodsDetails.itemInfo.highNowPrice), //商品价格
        goods_stock: this.goodsNumber,
        goods_checked: true, //商品的勾选状态
        goods_sizeKeyName: this.goodsDetails.skuInfo.sizeKey, //商品规格或尺寸
        goods_styleKeyName: this.goodsDetails.skuInfo.styleKey, //商品颜色
      };

      this.addGoods(goods);

      this.popupShow = false;
    },
    //加入购物车
    onAddCartClicked() {
      if (!this.token) {
        this.$router.push({
          path: "/login",
          query: {
            goodSdetails: "/goodSdetails",
          },
        });
        return;
      }
      if (this.goodsDetails.skuInfo.sizeKey) {
        if (this.propsStyleKey && this.propsSizeKey) {
          console.log("两种都有");
          this.getgoods();
        } else {
          this.$toast({ message: "请选择商品规格", position: "bottom" });
        }
      }
      if (!this.goodsDetails.skuInfo.sizeKey) {
        if (this.propsStyleKey) {
          console.log("一种");
          this.getgoods();
        } else {
          this.$toast({ message: "请选择商品规格", position: "bottom" });
        }
      }
    },

    //立即购买
    onBuyClicked() {
      if (!this.token) {
        this.$router.push({
          path: "/login",
          query: {
            goodSdetails: "/goodSdetails",
          },
        });
        return;
      }
      // 创建商品对象
      const goods = {
        goods_styleKey: this.propsStyleKey, //商品颜色值
        goods_sizeKey: this.propsSizeKey, //商品尺寸值
        goods_title: this.goodsDetails.itemInfo.title, //商品描述
        goods_img: this.goodsImg, //商品图片
        goods_price: Number(this.goodsDetails.itemInfo.highNowPrice), //商品价格
        goods_stock: this.goodsNumber,
        goods_checked: true, //商品的勾选状态
        goods_sizeKeyName: this.goodsDetails.skuInfo.sizeKey, //商品规格或尺寸
        goods_styleKeyName: this.goodsDetails.skuInfo.styleKey, //商品颜色
      };
      if (this.goodsDetails.skuInfo.sizeKey) {
        if (this.propsStyleKey && this.propsSizeKey) {
          console.log("两种都有");

          this.$router.push({
            path: "/goodsorder",
            query: {
              goodsObj: [goods],
            },
          });
        } else {
          this.$toast({ message: "请选择商品规格", position: "bottom" });
        }
      }
      if (!this.goodsDetails.skuInfo.sizeKey) {
        if (this.propsStyleKey) {
          console.log("一种");
          this.$router.push({
            path: "/goodsorder",
            query: {
              goodsObj: [goods],
            },
          });
        } else {
          this.$toast({ message: "请选择商品规格", position: "bottom" });
        }
      }
    },
    isPopupShow() {
      this.popupShow = true;
      if (!this.goodsImg) {
        this.goodsImg = this.goodsDetails.skuInfo.skus[0].img;
      }
      if (!this.goodsStock) {
        this.goodsStock = this.goodsDetails.skuInfo.totalStock;
      }
    },
    getgoodsStock() {
      let list = this.goodsDetails.skuInfo.skus;
      if (this.styleIndex) {
        list = list.filter((item) => item.styleId === this.styleIndex);
      }
      if (this.sizeIndex) {
        list = list.filter((item) => {
          return item.sizeId === this.sizeIndex;
        });
      }
      this.goodsStock = list.reduce((pre, x) => {
        return (pre += x.stock);
      }, 0);
    },
    //选中商品信息
    getGoods(props) {
      // 颜色类型
      if (props.type == "style" && this.styleIndex !== props.index) {
        this.styleIndex = props.index;

        this.propsStyleKey = props.name;
        this.getgoodsStock();
        let goodsObj = this.goodsDetails.skuInfo.skus.find((item) => {
          return item.styleId === props.index;
        });
        if (this.styleIndex) {
          this.goodsImg = goodsObj.img;
        }
      } else if (this.styleIndex == props.index && this.styleIndex) {
        this.styleIndex = 0;
        this.goodsImg = this.goodsDetails.skuInfo.skus[0].img;
        this.propsStyleKey = "";
      }
      // 规格或尺码类型
      if (props.type == "size" && this.sizeIndex !== props.index) {
        this.sizeIndex = props.index;
        this.propsSizeKey = props.name;
        this.getgoodsStock();
      } else if (this.sizeIndex == props.index && this.sizeIndex) {
        this.sizeIndex = 0;
        this.propsSizeKey = "";
      }
      if (!this.propsSizeKey && !this.propsStyleKey) {
        this.goodsStock = this.goodsDetails.skuInfo.totalStock;
      }
    },
  },
  created() {
    this.getGoodsDetails();
  },
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  background-color: #fafafa;
  padding: 12px;
  margin-right: 10px;
  box-sizing: border-box;
}
.goodsDetaails {
  background-color: #f1f1f1;
  height: 100%;
  margin-bottom: 70px;
  .goodsDetaails-wrp {
    max-width: 375px;
    overflow-x: hidden;
    height: 100%;
    margin: 0 auto;
    .goods-img {
      padding-top: 10px;
      background-color: #f1f1f1;
      position: relative;
      .detail-head {
        position: fixed;
        right: 12px;
        top: 38px;
        margin-top: 10px;
        z-index: 9;
        font-size: 16px;
        .head-entry {
          width: 40px;
          height: 40px;
          background: rgba(0, 0, 0, 0.3);
          border-radius: 50%;
          margin-bottom: 10px;
          text-align: center;
          line-height: 40px;
          i {
            color: #fff;
            font-size: 18px;
          }
        }
      }
      .img-item {
        padding-right: 10px;
        height: 357px;
      }
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .price-content {
      padding: 10px 16px 5px 12px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      .left {
        display: flex;
        align-items: center;
        .price-icon {
          margin-top: 6px;
        }
        .price {
          font-size: 20px;
          font-weight: bold;
        }
        .discount {
          background-color: #ffe8ee;
          margin-left: 3px;

          padding: 3px;
        }
      }
      .right {
        color: #666666;
      }
    }
    .goods-title {
      background-color: #fff;
      font-size: 15px;
      line-height: 20px;
      padding: 10px;
      display: flex;
      align-items: center;
      p {
        width: 273px;
        .yushou {
          width: 36px;
          height: 18px;
          margin-right: 5px;
        }
      }
      .bangwxuan {
        width: 78px;
        height: 24px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999999;
        background-color: #eee;
        padding: 5px 5px;
        border-radius: 100px;
        box-sizing: border-box;
        span {
          margin-left: 5px;
        }
        img {
          width: 14px;
          height: 14px;
          display: block;
        }
      }
    }
  }
  .goods_fw {
    background-color: #fff;
    padding: 0 10px;
  }
  .guige {
    margin-top: 10px;
    height: 45px;
    line-height: 45px;
    display: flex;
    align-items: center;

    .xuanze {
      font-size: 12px;
      color: #999999;
    }
    .guigeyanse {
      flex: 1;
      font-size: 13px;
      margin-left: 10px;
    }
    img {
      width: 10px;
      height: 10px;
      object-fit: cover;
    }
  }
  .fahuo {
    height: 66px;
    display: flex;
    align-items: center;

    span {
      font-size: 12px;
      color: #999999;
      margin-right: 10px;
      margin-bottom: 17px;
    }
    .shuoming {
      font-size: 13px;

      .fasj {
        color: #999999;
        margin-top: 5px;
      }
    }
  }
  .mianfyj {
    font-size: 12px;
    color: #999999;
    height: 45px;
    line-height: 45px;
    display: flex;
    justify-content: space-between;
  }
  .fuwu {
    height: 45px;
    line-height: 45px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    h4 {
      font-size: 12px;
      color: #999999;
      margin-right: 10px;
    }
    img {
      width: 10px;
      height: 10px;
      object-fit: cover;
    }
    ul {
      display: flex;
      flex: 1;
      li {
        font-size: 13px;
        display: flex;
        padding-right: 5px;
        span {
        }
      }
    }
  }
  .xianguganzizhi {
    height: 45px;
    display: flex;
    align-items: center;
    h4 {
      font-size: 12px;
      color: #999999;
      margin-right: 10px;
    }
    p {
      font-size: 13px;
      flex: 1;
    }
    img {
      width: 10px;
      height: 10px;
      object-fit: cover;
    }
  }
  .rateInfo {
    // height: 200px;
    margin-top: 10px;
    background-color: #fff;
    padding: 0 10px 10px 10px;
    .pjpf {
      display: flex;
      height: 40px;
      align-items: center;
      justify-content: space-between;
      // padding-top: 13px;
      span {
        font-size: 15px;
        font-weight: bold;
      }
    }
    .pingfen {
      display: flex;
      align-items: center;
      p {
        font-weight: bold;
        font-size: 13px;
        margin-right: 5px;
        span {
          font-size: 12px;
          color: red;
        }
      }
      img {
        width: 10px;
        height: 10px;
        object-fit: cover;
      }
    }
    .rateTags {
      ul {
        display: flex;
        flex-wrap: wrap;
        height: 30px;
        overflow: hidden;
        li {
          background-color: #fff6f6;
          font-size: 12px;
          margin-right: 7px;
          line-height: 30px;
          display: flex;
          white-space: nowrap;

          span {
            padding: 0 10px;
          }
        }
      }
    }
    .rateInfoV2 {
      margin-top: 10px;

      .user_info {
        display: flex;
        .user_name {
          margin-left: 5px;

          .p1 {
            font-size: 14px;
            font-weight: bold;
            margin-top: 5px;
          }
          .p2 {
            font-size: 12px;
            color: #999999;
            margin-top: 5px;
          }
        }
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .user_pinglun {
        font-size: 13px;
        color: #999999;
        margin-top: 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  .shopLabels {
    background-color: #fff;
    margin-top: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    .left {
      // width: 60px;
      // height: 60px;
      margin-right: 10px;
      flex: 0 0 60px;
      img {
        width: 100%;
      }
    }
    .right {
      flex: 1;

      .right_item,
      .right_item2 {
        display: flex;
        align-items: center;
      }
      .right_item {
        h4 {
          font-size: 14px;
          // flex: 1;
        }
        span {
          font-size: 13px;
          margin-right: 10px;
          right: 10px;
          position: absolute;
        }
        img {
          width: 10px;
          height: 10px;
          object-fit: cover;
          right: 10px;
          position: absolute;
        }
      }
      .right_item2 {
        .right_pingfen {
          margin-right: 5px;
          margin-top: 3px;
        }
        .saleDesc {
          font-size: 12px;
          color: #666;
          padding-left: 5px;
          margin-top: 3px;
          border-left: 1px solid #666;
        }
      }
      .right_item3 {
        margin-top: 3px;

        ul {
          display: flex;
          li {
            font-size: 12px;
            margin-right: 5px;
            color: #ff4495;
            border: 1px solid #e8e8e8;
            padding: 3px 5px;
            border-radius: 8.5px;
            overflow: hidden;
            span {
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
  .detailInfo {
    background-color: #fff;
    margin-top: 10px;
    img {
      width: 100%;
      display: block;
    }
    h4 {
      margin: 13px 12px;
      font-size: 13px;
      color: #666;
    }
    .parameter__product {
      background: #f6f6f6;
      border-radius: 4px;

      padding: 12px;
      margin: 12px;
    }
    .parameter__item {
      font-size: 12px;
      padding-bottom: 5px;
      color: #999;
      .parameter__name {
        min-width: 94px;
        visibility: visible;
      }
      .parameter__value {
        color: #333;
      }
      .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .flex {
      display: flex;
    }

    &::v-deep .van-tabs__line {
      background-color: #ff4747;
    }
  }
  .skudialog-goods {
    padding: 10px 15px 15px;
    height: 102px;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -moz-box-flex: 0;
    -ms-flex: none;
    flex: none;
    position: relative;
    img {
      width: 80px;
      object-fit: cover;
      position: absolute;
      top: 20px;
      left: 20px;

      display: block;
    }
  }
  .goods {
  }
  .flex .f-jc-sb {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .flex {
    display: flex;
  }

  // 底部按钮
  .footer {
    &::v-deep .van-goods-action {
      z-index: 99;
      bottom: -3px;
    }
    &::v-deep .van-goods-action-button--last {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    &::v-deep .van-goods-action-button--first {
      border-top-left-radius: 0;

      border-bottom-left-radius: 0;
    }
  }
}
.head-title {
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  color: #999;
}
.dialog_content {
  padding-bottom: 32px;
  padding-left: 16px;
  li {
    padding: 10px 0;
    border-bottom: 1px solid #ededed;
    .item-list {
      padding-right: 56px;
      visibility: visible;
    }
    .item_name {
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
    }
    .item_content {
      font-size: 12px;
      color: #999999;
      line-height: 16.5px;
    }
  }
}
// 商品规矩弹窗内容样式

.goodsSku {
  &::v-deep .van-goods-action-button--last {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  &::v-deep .van-goods-action-button--first {
    border-top-left-radius: 0;
    margin: 0;
    border-bottom-left-radius: 0;
  }
  .props-label {
    line-height: 12px;
    font-size: 12px;
    margin-bottom: 7px;
    color: #999;
  }
  .skudialog-goods {
    padding: 10px 15px 15px 15px;
    display: flex;
    align-items: center;
    .goods-imgs {
      flex: 0 0 80px;
      border-radius: 4px;
      img {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        display: block;
      }
    }
    .goods-info {
      margin-left: 20px;
      .goods-price {
        font-size: 18px;
      }
      ul {
        li {
          line-height: 20px;
        }
      }
      span {
        font-size: 12px;
      }
    }
  }
  .sku-props {
    padding: 0 15px;
    .sku-props-item {
      margin-top: 16px;
      padding-bottom: 6px;
      border-bottom: 1px solid #e5e5e5;
      .props-list {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        li {
          height: 20px;
          line-height: 20px;
          min-height: 20px;
          padding: 5px 15px;
          border: 1px solid #ccc;
          border-radius: 3px;
          margin-right: 10px;
          margin-bottom: 10px;
          font-size: 12px;
          color: #333;
          text-align: center;
          &.goodsSelected {
            color: #ff5777;
            border-color: #ff5777;
          }
        }
      }
    }
  }
  .sku-number {
    margin-bottom: 40px;
    margin-top: 16px;
    padding: 6px 4px 15px 16px;
    .number-calculator {
      height: 27.5px;
      border-radius: 3px;
      margin-top: 7.5px;
      line-height: 27.5px;
    }
  }
}
</style>